﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Content.cshtml";
}

<div>
    <ul class="breadcrumb" style="margin-bottom: 0px;">
        <li>
            <a href="#">Home</a> <span class="divider">/</span>
        </li>
        <li>
            <a href="#">客户管理</a>
        </li>
    </ul>
</div>

<div class='notifications bottom-right container-fluid' >
</div>

<div class="row-fluid">
    <div class="box span12">
        <div class="box-header well" data-original-title>
            <h3>客户列表</h3>
            <div class="box-icon">
                <a href="#" id="btnCreate" role="button" class="btn" data-toggle="modal"><i class="icon-plus-sign"></i></a>
                <a href="#" id="btnEdit" role="button" class="btn" data-toggle="modal"><i class="icon-edit"></i></a>
                <a href="#" id="btnDelete" role="button" class="btn" data-toggle="modal"><i class="icon-trash"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div id="grid"></div>
        </div>
    </div>
</div>



<div id="createAndEditModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

</div>

@section css{
    <link href="~/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/styles/kendo.default.min.css" rel="stylesheet" />
    <style>
        #createAndEditModal {
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width: 960px;
            /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
            margin: -250px 0 0 -450px; 
            }
        #createAndEditModal .modal-body {
        max-height: 800px;
        }


    </style>
}

@section Scripts {
    <script src="~/js/kendo.web.min.js"></script>

    <script>
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read:{
                       type: "GET",
                       url: "@Url.Action("GetAllItems", "Customer")",
                       dataType: "json"}
                },
                schema: {
                    data: "data",
                    total: "total",
                    model: {
                        id: "CustomerID",
                        fields: {
                            CustomerID: { type: "string" },
                            NO: { type: "string" },
                            CN_Name: { type: "string" },
                            Region: { type: "string" },
                            City: { type: "string" },
                            Tel: { type: "string" },
                            ContactPerson:{ type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

            dataSource.bind("error", dataSource_error);

            function dataSource_error(e) {
                ShowMessage("很遗憾！你的操作发生了错误。", 'error');
            }

            $("#grid").kendoGrid({
                dataSource: dataSource,
                filterable: true,
                sortable: true,
                pageable: true,
                reorderable: true,
                columns: [
                    { field: "CustomerID", filterable: false, hidden: true },
                    { field: "NO", title: "客户编号", width: 100, format: "{0:MM/dd/yyyy}" },
                    { field: "CN_Name", title: "客户名称", width: 180 },
                    { field: "Region", title: "区域", width: 60},
                    { field: "City", title: "城市", width: 60 },
                    { field: "Tel", title: "电话",  width: 60},
                    { field: "ContactPerson", title: "联系人",  width: 100 }],
                selectable: "row"
            });

            $("#btnEdit").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var row = grid.select();
                var data = grid.dataItem(row);
                if (data != null) {
                    $("#createAndEditModal").load("/Customer/Edit/" + data.CustomerID);
                    $('#createAndEditModal').modal('show');
                }
                else {
                    return;
                }  
            });

            $("#btnCreate").click(function () {
                $("#createAndEditModal").load("@Url.Action("Create", "Customer")");
                $('#createAndEditModal').modal('show');
            });

            $("#btnDelete").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var row = grid.select();
                var data = grid.dataItem(row);
                if (data != null) {
                    var result = window.confirm("确定要删除吗？");
                    if (result == true) {
                        $.ajax({
                            url: "/Customer/Delete/" + data.CustomerID,
                            type: "GET",
                            success: function (result) {
                                if (result.message == "ok") {
                                    ShowMessage('非常好！你的操作成功。', 'success');
                                    $('#grid').data().kendoGrid.dataSource.read(); // or
                                    $('#grid').data().kendoGrid.refresh();
                                }
                                else {
                                    ShowMessage(result.message, 'error');
                                }
                            }
                        });
                    }
                }
                else {
                    return;
                }
            });


        });
    </script>

    <script >
        function SuccessCreate(result) {
                if (result.data == true) {
                    $('#grid').data().kendoGrid.dataSource.read(); // or
                    $('#grid').data().kendoGrid.refresh();
                    $(".close").click();
                    ShowMessage('非常好！你的操作成功。', 'success');
                }
                else {
                    ShowMessage('很遗憾！你的操作发生了错误。', 'error');
                    return;
                }

            }

        function FailureCreate() {
            ShowMessage('很遗憾！你的操作发生了错误。', 'error');
        }
    </script>

}

